<template>
  <div class="app-container home">
    <el-row :gutter="20" class="mgb20">
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="title">用户</div>
          <div class="card-body">
            <el-icon class="card-icon bg1">
              <User />
            </el-icon>
            <div class="card-content">
              <div class="card-top">
                <div style="padding-right: 10px;">总计</div>
                <countup class="card-num color1" :end="list.totalUserCont" />
              </div>
              <div>昨日新增：{{ list.yesterdayUserCount }}</div>
              <div>今日新增：{{ list.todayUserCount }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="title">流水</div>
          <div class="card-body">
            <el-icon class="card-icon bg2">
              <Coin />
            </el-icon>
            <div class="card-content">
              <div class="card-top">
                <div style="padding-right: 10px;">总计</div>
                <countup class="card-num color2" :end="list.totalFlow" />
              </div>
              <div>昨日新增：{{ list.yesterdayFlow }}</div>
              <div>今日新增：{{ list.todayFlow }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="title">金币购买数量</div>
          <div class="card-body">
            <el-icon class="card-icon bg3">
              <Stopwatch />
            </el-icon>
            <div class="card-content">
              <div class="card-top">
                <div style="padding-right: 10px;">总计</div>
                <countup class="card-num color3" :end="list.totalBuy" />
              </div>
              <div>昨日新增：{{ list.yesterdayBuy }}</div>
              <div>今日新增：{{ list.todayBuy }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="title">应用</div>
          <div class="card-body">
            <el-icon class="card-icon bg4">
              <DataLine />
            </el-icon>
            <div class="card-content">
              <div class="card-top">
                <div style="padding-right: 10px;">总计</div>
                <countup class="card-num color4" :end="list.totalGame" />
              </div>
              <div>昨日新增：{{ list.yesterdayGame }}</div>
              <div>今日新增：{{ list.todayGame }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- <el-row :gutter="20" class="mgb20">
      <el-col :span="18">
        <el-card shadow="hover">
          <div class="card-header">
            <p class="card-header-title">订单动态</p>
            <p class="card-header-desc">最近一周订单状态，包括订单成交量和订单退货量</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="card-header">
            <p class="card-header-title">品类分布</p>
            <p class="card-header-desc">最近一个月销售商品的品类情况</p>
          </div>
        </el-card>
      </el-col>
    </el-row>  -->
  </div>
</template>
<script setup>
import countup from '@/components/countup.vue';
import { statistics } from '@/api/business/user';
const { proxy } = getCurrentInstance();

const list = ref('')
const getList = () => {
  statistics().then(response => {
    if (response.code == 200) {
      list.value = response.data
    }
  });
}
getList()
</script>


<style>
.mgb20 {
  margin-bottom: 20px;
}

.title {
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  font-size: 48rpx;
  color: #333333;
  line-height: 0rpx;
  text-align: center;
}

.card-body {
  display: flex;
  align-items: center;
  height: 100px;
  padding: 0;
}
</style>
<style scoped>
.card-content {
  flex: 1;
  /* text-align: center; */
  font-size: 14px;
  color: #999;
  padding: 0 20px;
}

.card-top {
  display: flex;
  align-items: center;
}

.card-num {
  font-size: 30px;
}

.card-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}

.bg1 {
  background: #2d8cf0;
}

.bg2 {
  background: #64d572;
}

.bg3 {
  background: #f25e43;
}

.bg4 {
  background: #e9a745;
}

.color1 {
  color: #2d8cf0;
}

.color2 {
  color: #64d572;
}

.color3 {
  color: #f25e43;
}

.color4 {
  color: #e9a745;
}

.chart {
  width: 100%;
  height: 400px;
}

.card-header {
  padding-left: 10px;
  margin-bottom: 20px;
}

.card-header-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.card-header-desc {
  font-size: 14px;
  color: #999;
}

.timeline-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  color: #000;
}

.timeline-time,
.timeline-desc {
  font-size: 12px;
  color: #787878;
}

.rank-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.rank-item-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f2f2f2;
  text-align: center;
  line-height: 40px;
  margin-right: 10px;
}

.rank-item-content {
  flex: 1;
}

.rank-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #343434;
  margin-bottom: 10px;
}

.rank-item-desc {
  font-size: 14px;
  color: #999;
}

.map-chart {
  width: 100%;
  height: 350px;
}
</style>
